<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
    <link rel="stylesheet" href="/static/css/loading-icon.css">
    <link rel="stylesheet" type="text/css" href="/static/css/Common.css">
    <title>客户信息</title>
</head>
<body>
<div class="sk-three-bounce" id="sk-three-bounce" style="display: none">
    <div class="sk-child sk-bounce1"></div>
    <div class="sk-child sk-bounce2"></div>
    <div class="sk-child sk-bounce3"></div>
</div>
<div style="width: 100%;height: 100%;padding: 0;margin: 0" id="main_viewer">
    <div>
        <table lay-filter="demo">
            <thead>
            <tr>
                <th lay-data="{field:'client_id',sort:true}">用户ID</th>
                <th lay-data="{field:'client_name',sort:true}">用户名</th>
                <th lay-data="{field:'balance_sum',sort:true}">银行卡余额</th>
                <th lay-data="{field:'due_sum',sort:true}">欠款额</th>
                <th lay-data="{field:'product_sum',sort:true}">购买产品总价值</th>
                <th lay-data="{field:'total',sort:true}">总资产</th>
                <th lay-data="{field:'frozen',sort:true}">冻结资产</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="record:${results}">
                <td th:text="${record.client_id}">用户ID</td>
                <td th:text="${record.client_name}">用户名</td>
                <td th:text="${record.balance_sum}">银行卡余额</td>
                <td th:text="${record.due_sum}">欠款额</td>
                <td th:text="${record.product_sum}">购买产品总价值</td>
                <td th:text="${record.balance_sum + record.product_sum}">总资产</td>
                <td th:text="${record.due_sum < record.balance_sum ? record.due_sum:record.balance_sum}">冻结资产</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div id="chart2" style="width: 1000px;height:500px;"></div>
</div>

<script type="text/javascript" src="/static/js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="/static/js/echarts.js"></script>
<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/LoadingJS.js"></script>
<script>
    var table = layui.table;

    //转换静态表格
    table.init('demo', {
        limit: 8 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
        //支持所有基础参数
        ,page:true
        ,limits: [8,16,24,32,40,48,56,64,72]
    });
</script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    option = {
        title:{
            show: true,
            text: "资产一览"
        },
        tooltip : {
            trigger: 'axis'
        },
        toolbox: {
            show : true,
        },
        legend: {
            tooltip:{					//图例提示框，默认不显示
                show:true,
            },
        },
        calculable : true,
        // 191922	Andrew	6000000.00	0	3100000.00
        // 191923	Bernie	8980000.00	0	800000.00
        // 191924	Simo	0	0	10000.00
        // 191925	Delina	56000000.00	0	1000000.00
        // 191926	DAK	258663.20	0	0
        // 191928	Haley	85650000.00	15620.00	620000.00
        // 191930	Lorne	9990000.00	3698.20	610000.00
        // 191933	Tylor	36520000.00	5632.25	2103000.00
        // 191935	Gest	18000000.00	0.00	1002500.00
        dataset: {
            source: [
                ['name','due_sum','remain_sum','product_sum'],
                ['Andrew', 0,2344510.02, 1016400.00],
                ['Bernie', 0,8980000.00, 800000.00],
                ['Simo', 0,0, 1000000.00],
                ['Delina', 0,5600000.00, 1000000.00],
                ['DAK', 0,258663.20, 0],
                ['Haley', 156200.00,856330.00, 620000.00],
                ['Lorne', 369800.20,999000.00, 610000.00],
                ['Tylor', 563200.25,365200.00, 2103000.00],
                ['Gest', 0,1800000.00, 1002500.00]
            ]
        },
        xAxis: {
            type: 'category'
        },
        yAxis: {},
        series: [
            {
                name : 'due_sum',
                type: 'bar',
                stack: 'x'
            },
            {
                name :  'remain_sum',
                type: 'bar',
                stack: 'x'
            },
            {
                name :  'product_sum',
                type: 'bar',
                stack: 'x'
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('chart2'));
    myChart.setOption(option);
</script>
<script type="text/javascript" src="/static/js/InspectionDefect.js"></script>
</body>
</html>

